<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-fold"></i> 首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>系统用户</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="always">
      <div slot="header">
        <el-form :inline="true" class="demo-form-inline" style="padding-top: 10px;padding-left: 10px; margin: 10px 0;"
          label-width="80px">
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="账号">
                <el-input v-model="username" placeholder="请输入账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="姓名">
                <el-input v-model="name" placeholder="请输入姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别">
                <el-select v-model="sex" placeholder="请选择性别">
                  <el-option label="全部" value=""></el-option>
                  <el-option label="男" value="男"></el-option>
                  <el-option label="女" value="女"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <br> -->
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item label="手机号码">
                <el-input v-model="phone" placeholder="请输入手机号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户状态">
                <el-select v-model="status" placeholder="请选择状态">
                  <el-option label="全部" :value="0"></el-option>
                  <el-option label="正常" :value="1"></el-option>
                  <el-option label="冻结" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <el-button type="primary" @click="getSearchSystemUsersList">查询</el-button>
                <el-button @click="clearSearch">清空筛选条件</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>

        <el-row style="margin-bottom: 10px;">
          <el-button type="primary" @click="addUser">新增用户</el-button>
        </el-row>
      </div>
      <el-table :data="tableData" v-loading="loading" border style="width: 100%">
        <el-table-column prop="username" label="用户账号" width="100">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100">
        </el-table-column>
        <el-table-column prop="img" label="头像" width="100">
          <template slot-scope="{row}">
            <!-- <img v-lazy="`http://www.img.ttblog.cn/`+row.img"  style="width: 65px;height: 65px;"/> -->
            <img :src="`http://www.img.ttblog.cn/` + row.img" alt="" style="width: 65px;height: 65px;">
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="50">
        </el-table-column>
        <el-table-column prop="birthday" label="生日" width="150">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="100">
        </el-table-column>
        <el-table-column prop="address" label="部门" width="100">
          <template slot-scope="{row}">
            {{ row.department | filterDuty(bmMsg) }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="负责部门" width="100">
          <template slot-scope="{row}">
            {{ row.resdepartment | filterDuty(bmMsg) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="70">
          <template slot-scope="{row}">
            <el-tag v-if="row.status == 1">正常</el-tag>
            <el-tag v-else type="danger">冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" fixed="right" min-width="220" width="220">
          <template slot-scope="{row}">
            <el-button style="margin-right: 10px;" @click="editUser(row.id)">编辑</el-button>
            <el-dropdown split-button type="primary">
              更多菜单
              <el-dropdown-menu slot="dropdown">
                <el-button type="danger" @click="deleteUser(row.id)">删除</el-button>
                <el-button type="warning" @click="freezeUser(row.id, row.status)">{{ row.status == 1 ? '冻结' : '解冻'
                }}</el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top: 20px;" @current-change="getSystemUsersList"
        @size-change="getSystemUsersList" :current-page.sync="pageInfo.pageNum" :page-sizes="[3, 5, 10, 20]"
        :page-size.sync="pageInfo.pageSize" layout="prev, pager, next,total,jumper,->, sizes" :total="pageInfo.total"
        :pager-count="7">
      </el-pagination>
    </el-card>
    <el-drawer title="新增" :visible.sync="drawerShow" direction="rtl" custom-class="demo-drawer" ref="drawer">
      <div class="demo-drawer__content">
        <AddUser :id="id" :isEdit="isEdit" v-if="drawerShow"></AddUser>
        <div class="demo-drawer__footer">
          <el-button type="primary" @click="submitUserInfo">提交</el-button>
          <el-button @click="drawerShow = false;">取 消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import AddUser from './AddUser.vue';
export default {
  name: 'SystemUser',
  components: {
    AddUser,
  },
  data() {
    return {
      pageInfo: {
        pageNum: 1,
        pageSize: 3,
        total: 20,
      },
      drawerShow: false,
      formLabelWidth: '80px',
      username: '',
      name: '',
      sex: '',
      phone: '',
      status: 0,
      tableData: [],
      loading: false,
      // 部门信息
      bmMsg: [],
      // 给子组件传参
      id: 0,
      isEdit: false,
    }
  },
  mounted() {
    this.getBm();
    this.getSystemUsersList();
  },
  methods: {
    async getSystemUsersList() {
      this.loading = true;
      let { pageSize, pageNum } = this.pageInfo;
      let { username, name, phone, status, sex } = this;
      let res = await this.$API.SystemMenus.reqSystemUsersList(pageNum, pageSize, username, name, sex, phone, status);
      if (res.code == 200) {
        this.pageInfo.total = res.data.total;
        this.tableData = res.data.list;

      } else {
        this.tableData = [];
        this.pageInfo.total = 0;
        this.$message({ message: '没有数据', type: 'error' })
      }
      this.loading = false;
    },
    async getSearchSystemUsersList() {
      this.pageInfo.pageNum = 1;
      await this.getSystemUsersList();
      if (this.tableData.length > 0) {
        this.$message({ message: '查询成功', type: 'success' })
      }
    },
    clearSearch() {
      this.username = '';
      this.phone = '';
      this.pageInfo.pageNum = 1;
      this.name = '';
      this.sex = '';
      this.status = 0;
      this.getSystemUsersList();
    },
    async getBm() {
      let res = await this.$API.SystemMenus.reqSystemBm();
      this.bmMsg = res;
    },
    submitUserInfo() {
      this.drawerShow = false;
      this.$bus.$emit('addOrUpdateSystemUser');
      setTimeout(() => {
        this.getSystemUsersList();
      }, 100);
    },
    editUser(id) {
      this.id = id;
      this.isEdit = true;
      this.drawerShow = true;
    },
    addUser() {
      this.id = undefined;
      this.isEdit = false;
      this.drawerShow = true;
    },
    async freezeUser(id, status) {
      let res = await this.$API.SystemMenus.reqUpdateSystemUserByStatus(id, status);
      if (res.code == 1) {
        this.$message({ message: status == 1 ? '冻结成功' : '解冻成功', type: 'success' })
      };
      this.getSystemUsersList();
    },
    deleteUser(id) {
      this.$confirm('确定删除该用户吗？, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.SystemMenus.reqDeleteSystemUserById(id);
        if (res.code == 1) {
          this.pageInfo.pageNum = 1;
          this.$message({ message: '删除成功', type: 'success' })
        }
        this.getSystemUsersList();
        this.$message({ type: 'success', message: '删除成功!' });
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
  },
  filters: {
    filterDuty(val, bmMsg) {
      let res = '';
      bmMsg.forEach(item => {
        if (item.id == val) {
          res = item.dicname;
        }
      });
      return res;
    },
  }


};
</script>

<style>
.el-drawer__body {
  padding: 20px;
  flex: 1;
  overflow: auto;
}

.demo-drawer {
  width: 40% !important;
  padding-bottom: 20px;
}

.demo-drawer__content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.demo-drawer__content form {
  flex: 1;
}

.demo-drawer__footer {
  display: flex;
}

.demo-drawer__footer button {
  flex: 1;
}
</style>
